<template>
	<view class="main">
		<picker mode="multiSelector" :range="timeList" :value="valueStart"
			@click="handleGetRange(false)" @change="bindTypeChange($event, true)"
			@columnchange="timeColumnchange($event,false)">
			<text v-if="startTaskTime===''">开始时间</text>
			<text v-if="startTaskTime"
				:style="{color: timeTextColor,'font-size':timeTextSize,'font-weight':timeTextWeight}">{{ startHour }}:{{startMinute }}</text>
		</picker>
		<!-- <view style="width: 48rpx; height: 1px; margin: 0 37rpx;" :style="{'background-color': whipptreeBgColor}"></view> -->
		<text style="margin: 0 10rpx;" :style="{color: timeTextColor,'font-size':timeTextSize,'font-weight':timeTextWeight}">—</text>
		<picker mode="multiSelector" :range="timeList" :value="valueEnd"
			@columnchange="timeColumnchange($event,true)" @click="handleGetRange(true)"
			@change="bindTypeChange($event, false)">
			<text v-if="endTaskTime===''">结束时间</text>
			<text v-if="endTaskTime"
				:style="{color: timeTextColor,'font-size':timeTextSize,'font-weight':timeTextWeight}">{{ endHour }}:{{ endMinute }}</text>
		</picker>
	</view>
</template>

<script>
	import format from '@/libs/day-format.js'
	export default {
		name:"timeSelect",
		props: {
			startTaskTime:{
				type:String,
				default:''
			},
			endTaskTime:{
				type:String,
				default:''
			},
			whipptreeBgColor:{
				type:String,
				default:'#ABABAB'
			},
			timeTextColor:{
				type:String,
				default:'#402110'
			},
			timeTextSize:{
				type:String,
				default:'30rpx'
			},
			timeTextWeight:{
				type:String,
				default:'bold'
			},
			timeFlag:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				valueStart: [0, 0],
				valueEnd: [0, 0],
				timeList: [
					[],
					[]
				],
				startTime:'',
				endTime:'',
				startHour:'',
				startMinute:'',
				endHour:'',
				endMinute:'',
				Day:'',//日期
				toDay:'',
				tomorrow:'',
			};
		},
		watch:{
			startTaskTime(){
				this.startTime = this.startTaskTime
				this.startHour = this.startTaskTime.slice(11,13)
				this.startMinute = this.startTaskTime.slice(14,16)

			},
			endTaskTime(){
				this.endTime = this.endTaskTime
				this.endHour = this.endTaskTime.slice(11,13)
				this.endMinute = this.endTaskTime.slice(14,16)
			}
		},
		methods: {
			timeColumnchange(event, isEnd) {
				if (event.detail.value == 0 && event.detail.column == 0) {
					this.ishourChange = false
					this.handleGetRange(isEnd)
				} else if (event.detail.value != 0 && event.detail.column == 0) {
					this.ishourChange = true
				}
				if (this.ishourChange) {
					this.$forceUpdate()
					this.timeList[1] = (Array.from(Array(6), (v, k) => k == 0 ? '00' : k * 10))
				}
			},
			// 根据当前时间给出时间选择范围
			handleGetRange(isEnd) {
				//	console.log("11111")
				// 今天修改时间选择器范围
				if (this.timeFlag == 0) {
					// 当前时间
					let day_0 = new Date();
					day_0.setDate(day_0.getDate());
					let hour = parseInt(day_0.format("hh"));
					let minute = parseInt(day_0.format("mm"));
					// console.log('hour', hour, 'minute',minute)
					let minflag = Math.ceil(minute / 10) * 10 + 30
					if (isEnd) {
						//console.log(typeof this.startHour,typeof this.startMinute)
						if(this.startHour!=''){
							hour = parseInt(this.startHour)
						}
						if(this.startMinute!=''){
							minflag = parseInt(this.startMinute)
						}
						minflag += 30
					}
					if (minflag >= 60) {
						hour += Math.floor(minflag / 60)
						hour = hour <= 23 ? hour : hour - 24
						minflag = minflag - 60 * Math.floor(minflag / 60)
					}
					this.timeList = [
						[],
						[]
					]
					this.timeList[0] = Array.from(Array(24), (v, k) => k < 10 ? '0' + k : k).slice(hour)
					this.timeList[1] = Array.from(Array(6), (v, k) => k == 0 ? '00' : k * 10).slice(minflag / 10)
					// console.log('this.timeList[0]', this.timeList[0])
					// 明天重置时间选择器范围
			
				} else {
					this.timeList = [
						[],
						[]
					]
					this.timeList[0] = Array.from(Array(24), (v, k) => k < 10 ? '0' + k : k)
					this.timeList[1] = Array.from(Array(6), (v, k) => k == 0 ? '00' : k * 10)
					//this.timeList[1] = Array.from(Array(60), (v, k) => k < 10 ? '0' + k : k)
				}
			},
			// 当选择开始结束时间
			bindTypeChange(e, flag) {
				if (flag) {
					this.startHour = this.timeList[0][e.detail.value[0]]
					this.startMinute = this.timeList[1][e.detail.value[1]]
					this.startTime = this.timeFlag == 0 ? this.toDay + ' ' + this.startHour + ':' + this.startMinute +
						':' + '00' : this.tomorrow + ' ' + this.startHour + ':' + this.startMinute + ':' + '00'
					this.$emit('starTime',this.startTime)
					setTimeout(() => {
						this.calWorkTime()
					}, 500)
				} else if (!flag) {
					this.endHour = this.timeList[0][e.detail.value[0]]
					this.endMinute = this.timeList[1][e.detail.value[1]]
					this.endTime = this.timeFlag == 0 ? this.toDay + ' ' + this.endHour + ':' + this.endMinute + ':' +
						'00' : this.tomorrow + ' ' + this.endHour + ':' + this.endMinute + ':' + '00'
					this.$emit('endTime',this.endTime)
					setTimeout(() => {
						this.calWorkTime()
					}, 500)
				}
			},
			//获取日期
			getDay(){
				let day_0 = new Date();
				day_0.setDate(day_0.getDate() + this.timeFlag);//timeFlag=number 0今天 1明天
				this.Day = this.formatDate(day_0)
			},
			//获取今日日期
			getToDay(){
				let day_0 = new Date();
				day_0.setDate(day_0.getDate());
				this.toDay = this.formatDate(day_0)
			},
			//明天的时间
			getTomorrowDay(){
				var day_1 = new Date();
				day_1.setDate(day_1.getDate() + 1);
				this.tomorrow = this.formatDate(day_1)
			},
			formatDate(date) {
				var d = date,
					month = '' + (d.getMonth() + 1),
					day = '' + d.getDate(),
					year = d.getFullYear();
			
				if (month.length < 2) month = '0' + month;
				if (day.length < 2) day = '0' + day;
			
				return [year, month, day].join('-');
			},
			// 计算工作时间
			calWorkTime() {
				if ((!this.endHour) || (!this.startHour)) return
				// 工作时长
				let workHour = this.endHour - this.startHour
				let workMinute = this.endMinute - this.startMinute
			
				if (workMinute < 0) {
					this.workTime = (workHour - 1) + Math.round((60 + workMinute) / 60 * 10) / 10
				} else {
					this.workTime = workHour + Math.round(workMinute / 60 * 10) / 10
				}
			},
		},
		beforeMount() {
			this.getToDay()
			this.getTomorrowDay()
			this.timeList[0] = Array.from(Array(24), (v, k) => k < 10 ? '0' + k : k)
			this.timeList[1] = Array.from(Array(6), (v, k) => k == 0 ? '00' : k * 10)
		},
	}
</script>

<style lang="less" scoped>
	.main {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
</style>
